<template>
    <div class="project-list" @click.stop>
        <div slot="content">
            <search-box
                :paramArray="paramArray"
                :reset="false"
                @search="search"
                >
                </search-box>
                <table-box
                :tableObj="tableObj"
                @changePage="changePage"
                >
                </table-box>
        </div>
        <Modal
        v-model="showSettingKey"
        title="配置密钥"
        >
            <Form ref="formInline" :model="formInline" :rules="ruleInline" :label-width="80">
                <FormItem prop="prjNo" label="项目编号">
                    <Input type="text" v-model="formInline.prjCode" placeholder="请输入项目编号">
                    </Input>
                </FormItem>
                <FormItem prop="projSec" label="密钥">
                    <Input type="text" v-model="formInline.projSec" placeholder="请输入密钥">
                    </Input>
                </FormItem>
            </Form>
            <div class="footer" slot="footer">
                <Button @click="showSettingKey = false">取消</Button><Button type="primary" @click="confirm">确定</Button>
            </div>
        </Modal>
         <Modal
            title="项目审核"
            v-model="showPrjSh"
            >
            <div style="font-size: 16px;color: #333;">
                确定要对项目进行审核么？
            </div>
            <div class="footer" slot="footer">
                <Button @click="showPrjSh = false">取消</Button><Button type="primary" @click="doPrj()">通过</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import {projectList, projectSh, projSetMy} from '@/js/api'
import { getDb, setDb} from '@/js/common'
export default {
    name: 'projectList',
    data () {
        return {
            isNullProjSec: true,
            showSettingKey: false,
            showPrjSh: false,
            currentProject: {},
            formInline: {
                prjCode: '',
                projSec: ''
            },
            ruleInline: {},
            // 1 审核中 2 已审核 3 审核未通过
            statusNameArray: [
                '',
                '待审核',
                '已通过',
                '已驳回'
            ],
             tabList: [
                {
                    name: '我的项目',
                    value: 0
                },
                {
                    name: '参建项目',
                    value: 1
                }
            ],
            currentIndex: 0,
            paramArray: [
                {
                    key: 'input',
                    value: '',
                    label: '项目名称',
                    placeholder: '请输入项目名称',
                    width: '',
                    selectList: [],
                    casArray: [],
                    type: 'projName'
                },
                {
                    key: 'startEndTime',
                    value: '',
                    label: '起止时间',
                    placeholder: '开始日期          -          结束日期',
                    width: '',
                    selectList: [],
                    casArray: [],
                    type: 'times'
                },
                {
                    key: 'select',
                    value: '',
                    label: '状态',
                    placeholder: '请选择',
                    width: '',
                    type: 'status',
                    selectList: [
                        {
                            label: '待审核',
                            value: 1
                        },
                        {
                            label: '审核通过',
                            value: 2
                        },
                        {
                            label: '已驳回',
                            value: 3
                        }
                    ],
                    casArray: []
                }
                
            ],
            tableObj: {
                pageObj: {
                    pageSize: 10,
                    total: 11,
                    page: 1
                },
                list: [{content: '你好', status: 0}],
                columns: [
                    {
                        key: 'prjName',
                        title: '项目名',
                        width: 150
                    },
                    {
                        key: 'prjCode',
                        title: '项目编号',
                        width: 150
                    },
                    {
                        key: 'content',
                        title: '总额'
                    },
                    {
                        key: 'contractorName',
                        title: '项目部',
                        width: 150
                    },
                    {
                        key: 'content',
                        title: '项目负责人'
                    },
                    {
                        key: 'content',
                        title: '手机号'
                    },
                    {
                        key: 'createdAt',
                        title: '发布时间'
                    },
                    {
                        key: 'content',
                        title: '项目状态'
                    },
                    {
                        key: 'content',
                        title: '停工/开工'
                    },
                    {
                        key: 'status',
                        title: '审核状态',
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                }, this.statusNameArray[params.row.status])
                            ])
                        }
                    },
                    {
                        key: 'action',
                        width: 150,
                        title: '操作',
                        render: (h, params) => {
                            const first = [h('a', {
                                    on: {
                                        click: () => {
                                            this.currentProject = params.row
                                            this.showPrjSh = true
                                        }
                                    }
                                }, '审核'),
                                h('span', {
                                    class: 'split'
                                }, '')]
                            const second = [
                                 h('a', {
                                    on: {
                                        click: () => {
                                            
                                            this.currentProject = params.row
                                            if (params.row.prjSecret == '') {
                                                this.formInline.prjCode = ''
                                                this.isNullProjSec = true
                                            } else {
                                                this.formInline.prjCode = params.row.prjCode
                                                this.isNullProjSec = false
                                            }
                                            this.formInline.projSec = params.row.prjSecret
                                            this.showSettingKey = true
                                        }
                                    }
                                }, '配置秘钥'),
                                h('span', {
                                    class: 'split'
                                }, ''),
                                h('a', {
                                    on: {
                                        click: () => {
                                            this.seeGateBrake(params.row)
                                        }
                                    }
                                }, '查看闸机'),
                                h('span', {
                                    class: 'split'
                                }, ''),
                                h('a', {
                                    on: {
                                        click: () => {
                                            this.seeAttendance(params.row)
                                        }
                                    }
                                }, '查看考勤'),
                                h('span', {
                                    class: 'split'
                                }, ''),
                                h('a', {
                                    on: {
                                        click: () => {
                                            this.goDetail(params.row)
                                        }
                                    }
                                }, '详情'),
                            ]
                            const dos = params.row.status == 1 ? [...first, ...second] : [...second]
                            return h('div', dos)
                        }
                    }
                ]
            },
            searchObj: {
                projName: '',
                upDatedAtStart: '',
                upDatedAtEnd: '',
                status: ''
            }
        }
    },
    mounted () {
        this.getList()
    },
    methods: {
        search (obj) {
            this.doSearchMsg(obj)
            this.tableObj.pageObj.page = 1
            this.getList()
        },
        doSearchMsg (obj) {
            const {times, projName, status} = obj
            this.$set(this.searchObj,'projName', projName)
            if (times && times.length && times[0]) {
                this.$set(this.searchObj,'upDatedAtStart', this.$moment(times[0]).format('YYYY-MM-DD'))
                this.$set(this.searchObj,'upDatedAtEnd', this.$moment(times[1]).format('YYYY-MM-DD'))
            }
            if (status) {
                this.$set(this.searchObj,'status', status)
            }
        },
        // 查看闸机
        seeGateBrake (item) {
            const {prjName} = item
            setDb('currentP', JSON.stringify(item))
            this.$router.push({
                path: '/attendance/gateBrake?prjName=' + prjName
            })
        },
        // 项目审核
        doPrj (status) {// status  true 通过  false 拒绝
            let param = {}
            let userName = getDb('userName') || ''
            let token = getDb('token')
            const {currentProject: {id}} = this
            param = {
                userName,
                token,
                projID: id,
            }
            projectSh(param).then(r => {
                if (r.code == 200) {
                    this.$Message.success('审核通过')
                    setTimeout(() => {
                        this.showPrjSh = false
                        this.getList()
                    }, 1000)
                }
            })
        },
        changePage (page) {
            this.tableObj.pageObj.page = page
            this.getList()
        },
        getList () {
            let param = {}
            let userName = getDb('userName')
            const {tableObj:{pageObj: {page}}, searchObj: {projName, upDatedAtStart,upDatedAtEnd, status }} = this
            param = {
                currentPage:page,
                token: getDb('token'),
                // upDatedAtStart: getYMDHSM(new Date('2010-1-1')),
                userName
            }
            if (projName) param.projName = projName
            if (upDatedAtStart) param.upDatedAtStart = upDatedAtStart
            if (upDatedAtEnd) param.upDatedAtEnd = upDatedAtEnd
            if (status) param.prjStatus = status
            if (this.$route.query.corpName) param.corpName = this.$route.query.corpName
            projectList(param).then(r => {
                if (r.code == 200) {
                    this.tableObj.list = r.data && r.data.list || []
                    this.tableObj.pageObj.total = r.data.count || 0
                }
            })
        },
        show (e) {
        },
        choiceTab (item, i) {
            this.currentIndex = i
            if (i == 0) return
            setTimeout(() => {
                this.$router.push({
                    name: 'canjianList'
                })
            }, 300)
        },
        goDetail (item) {
            this.$router.push({
                name: 'projectDetail',
                query: {
                    id: item.id || '1'
                }
            })
        },
        confirm () {
            const {formInline: {prjCode, projSec}, currentProject: {id}} = this
            if (prjCode == '') {
                this.$Message.error('请输入项目账号')
                return
            }
            if (projSec == '') {
                this.$Message.error('请输入项目秘钥')
                return
            }
            let userName = getDb('userName')
            let token = getDb('token')
            let param = {}
            param = {
                projID: id,
                projCode:prjCode,
                projSec,
                userName,
                token
            }
            projSetMy(param).then(r => {
                if (r.code == 200) {
                    this.$Message.success('配置成功')
                    this.showSettingKey = false
                    setTimeout(() => {
                        this.getList()
                    }, 1000)
                } else {
                    this.$Message.error(r.msg)
                }
            })
        },
        seeAttendance (item) {
            const {prjName} = item
            this.$router.push({
                path: '/attendance',
                query: {
                    prjName
                }
            })
        }
    },
    watch: {
        showSettingKey (val) {
            if (!val) {
                this.$refs.formInline.resetFields()
            }
        }
    }
}
</script>
<style lang="less" scoped>
.project-list{
    overflow: hidden;
    background: #fff;
    padding: 20px;
    /deep/.split {
        margin: 0 5px;
        display: inline-block;
        width:1px;
        height: 10px;
        background: #2d8cf0;
    }
    /deep/.content {
        padding: 20px;
    }
}
</style>